<template>
	<view class="loacation">

		<view class="SearchBox">
			<u-search placeholder="请输入出发城市" v-model="searchval" shape="square" actionText="取消" bgColor="#FFFFFF"
				:actionStyle="actionStyle" @clickIcon="handleSearchCity" @change="hsnadlechange" @custom="handlecustom"
				@search="handleSearchCity"></u-search>
		</view>

		<view class="resetLocation">

			<view class="resetLocationLeft">
				当前：{{city}}
			</view>
			<view class="resetLocationRight" @click="siteGzh">
				<image class="" src="http://120.76.245.175/uploads/image/reset.png"
					style="width: 30rpx; height: 30rpx;">
					<view class="">
						重新定位
					</view>
			</view>

		</view>
		<view class="hotCity">
			<view class="title">
				热门城市
			</view>
			<view class="hotCityBox">
				<view class="hotitem" v-for="(item,index) in hotList" :key="item.id" @click="handleHot(item)">
					{{item.name}}
				</view>
			</view>


		</view>

		<view v-if="searchList.length" class="searchList">
			<view class="searchListitem" v-for="(item,index) in searchList" :key="index"
				@click="handleSearchlocation(item)">
				{{item.name}}
			</view>
		</view>

		<view v-else class="locationBox">
			<uni-indexed-list :options="list" :show-select="false" @click="bindClick" />
		</view>


	</view>
</template>

<script>
	import {
		houseRegion,
		positioning,
		houseArea,
		searchCity,
		mineData,
		positionsForname,
		city_lat
	} from "@/api/api.js"
	export default {
		data() {
			return {
				searchval: "",
				list: [],
				hotList: [],
				city: "",
				actionStyle: {
					color: "#ffffff"
				},
				indexList: [],
				itemArr: [],
				searchList: [],
			}
		},
		onLoad() {
			console.log("定位onload")
			if (uni.getStorageSync("location")) {
				this.city = uni.getStorageSync("location")
			} else {
				this.siteGzh()
			}
			this.getHouseRegion()

			let handleLocationHome = {
				flag: false,
				city: "",
			}
			let handleLocationResource = {
				flag: false,
				city: "",
			}
			uni.setStorageSync("handleLocationResource", handleLocationResource)
			uni.setStorageSync("handleLocationHome", handleLocationHome)
		},
		onUnload() {
			console.log("定位onunload")
		},
		methods: {
			async getMineData() {
				let res = await mineData()
				this.city = res.data.city
			},
			handlecustom() {
				this.searchval = "",
					this.getHouseRegion()
			},
			async handleSearchlocation(item) {
				let res = await positionsForname({
					city: item.name
				})
				if (res.code == 1000) {
					// console.log("更新城市", res)
				}
				uni.setStorageSync("location", item.name)
				let handleLocationHome = {
					flag: true,
					city: item.name,
				}
				uni.setStorageSync("handleLocationHome", handleLocationHome)
				let handleLocationResource = {
					flag: true,
					city: item.name,
				}
				uni.setStorageSync("handleLocationResource", handleLocationResource)
				uni.switchTab({
					url: "./index"
				})

				//需要重新获取筛选地区
				this.getHouseArea()
			},
			hsnadlechange(value) {
				if (value == "") {
					this.searchList = []
				}
			},
			async handleSearchCity() {
				if (this.searchval == "") {
					uni.showToast({
						title: "请输入搜索城市！",
						icon: "none",
					})
					return
				}
				let res = await searchCity({
					city: this.searchval
				})
				if (res.code == 1000) {
					this.searchList = res.data
				}
				console.log("55555555555", this.searchval)
			},
			async getHouseRegion() {
				let res = await houseRegion()
				// console.log("城市列表", res.data)
				this.hotList = res.data.hot
				this.list = res.data.data
				console.log("城市列表", this.list)
			},

			// 获取定位、
			siteGzh() {
				console.log(222);
				let that = this;
				uni.getFuzzyLocation({
					type: 'wgs84',
					success: async function(res) {
						// console.log(("mmmmmmmmmmm",res))
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
						let subres = await positioning({
							longitude: res.longitude,
							latitude: res.latitude
						})
						if (subres.code == 1000) {
							that.city = subres.data
							this.getHouseArea()
							uni.setStorageSync("location", that.city)
							let handleLocationHome = {
								flag: true,
								city: that.city,
							}
							uni.setStorageSync("handleLocationHome", handleLocationHome)
							let handleLocationResource = {
								flag: true,
								city: that.city,
							}
							uni.setStorageSync("handleLocationResource", handleLocationResource)
						}

					}
				});
				return
				uni.request({
					url: "https://restapi.amap.com/v3/ip?parameters", // access_token从服务端获取
					method: 'GET',
					data: {
						// key: '86627221df3646a71923813a017a373c',
						key: 'a7e60771418acdb802aab4d206c080c3',
					},
					success: async function(res) {

						console.log("定位数据", res);
						that.city = res.data.city
						let ress = await positioning({
							city: that.city
						})
						uni.setStorageSync("location", that.city)
						let handleLocationHome = { 
							flag: true,
							city: that.city,
						}
						uni.setStorageSync("handleLocationHome", handleLocationHome)
						let handleLocationResource = {
							flag: true,
							city: that.city,
						}
						uni.setStorageSync("handleLocationResource", handleLocationResource)
					},
					//定位失败回调
					fail: function(err) {
						console.log("err==============>", err);
						uni.showToast({
							title: "请检查定位权限",
							icon: "none",
							mask: true
						})
					}
				})

			},

			// positioning() {
			// 	uni.chooseLocation({
			// 		success: (res) => {
			// 			this.city = res.address
			// 			console.log(res, '////');

			// 		}
			// 	});
			// },

			async bindClick(e) {
				// console.log('返回数据', e.item.name)
				let res = await positionsForname({
					city: e.item.name
				})
				if (res.code == 1000) {
					// console.log("更新城市", res)
				}
				uni.setStorageSync("location", e.item.name)
				let handleLocationHome = {
					flag: true,
					city: e.item.name,
				}
				uni.setStorageSync("handleLocationHome", handleLocationHome)
				let handleLocationResource = {
					flag: true,
					city: e.item.name,
				}
				uni.setStorageSync("handleLocationResource", handleLocationResource)
				uni.switchTab({
					url: "./index"
				})

				//需要重新获取筛选地区
				this.getHouseArea()
			},
			async handleHot(item) {
				console.log("item", item)

				uni.setStorageSync("location", item.name)

				if (uni.getStorageSync('token')) {
					//更新用户的城市信息
					let res = await positionsForname({
						city: item.name
					})
					//需要重新获取筛选地区
					let handleLocationHome = {
						flag: true,
						city: item.name,
					}
					uni.setStorageSync("handleLocationHome", handleLocationHome)
				} else {
					let subres = await city_lat({
						city: item.name
					})
					// console.log("rrrr经纬度", subres)
					let positions = {
						longitude: subres.data.longitude,
						latitude: subres.data.latitude
					}
					uni.setStorageSync('positions',positions)
					let handleLocationHome = {
						flag: true,
						city: item.name,
						latitude: subres.data.latitude,
						longitude: subres.data.longitude
					}
					uni.setStorageSync("handleLocationHome", handleLocationHome)
				}

				let handleLocationResource = {
					flag: true,
					city: item.name,
				}
				this.city = item.name
				this.getHouseArea()
				uni.setStorageSync("handleLocationResource", handleLocationResource)
				uni.switchTab({
					url: "./index"
				})

			},
			//获取筛选地区数据
			async getHouseArea() {
				let res = await houseArea({
					city:this.city
				})
				console.log("筛选地区", res)
				uni.setStorageSync("areaList", res.data)
			},
		}
	}
</script>

<style scoped lang="scss">
	.searchList {
		margin-top: 30rpx;
		width: 100%;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;

		.searchListitem {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 88rpx;
			border-bottom: 1rpx solid #F7F8FA;
		}
	}

	.loacation {

		.SearchBox {
			width: 100%;
			height: 88rpx;
			background-color: #F8AD22;
			padding: 8rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 39rpx;
			position: relative;


			.inputitem {
				width: 614rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-indent: 66rpx;
			}

			.close {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 33rpx;
			}
		}

		.resetLocation {
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
			padding: 30rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 33rpx;

			.resetLocationRight {
				width: 160rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #666666;
			}
		}


		.hotCity {
			width: 100%;
			// height: 184rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
			padding: 30rpx 30rpx;
			box-sizing: border-box;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 33rpx;
			}

			.hotCityBox {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.hotitem {
					width: 160rpx;
					height: 64rpx;
					background: #F7F8FA;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 64rpx;
					text-align: center;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
				}

				.hotitem:nth-child(4n) {
					margin-right: 0rpx;
				}
			}
		}
	}
</style>